<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img v-lazy="pageImgArr.pic01" alt="">
        <img id="share" @click="shareForWechat" v-lazy="pageImgArr.pic12" alt="">
      </div>
    </div>
    <div class="relative nav" :class="{'fixed':scrollFixed}">
      <img v-lazy="pageImgArr.pic02" alt="">
      <div class="width_50_1" @click="getGoodsAction('liftStyle')"></div>
      <div class="width_50_2" @click="getGoodsAction('workStyle')"></div>
    </div>
    <div :class="{'abandon':scrollFixed}" ref="abandon" ></div>
    <div class="relative">
      <div v-show="pageStyle=='liftStyle'"><img v-lazy="pageImgArr.pic03" alt=""></div>
      <div v-show="pageStyle=='workStyle'"><img v-lazy="pageImgArr.pic07" alt=""></div>
      <div class="remix-goods remix01">
        <self-define :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.slice(0,1)" :key="index"/>
      </div>
    </div>
    <div class="relative">
      <div v-show="pageStyle=='liftStyle'"><img v-lazy="pageImgArr.pic04" alt=""></div>
      <div v-show="pageStyle=='workStyle'"><img v-lazy="pageImgArr.pic08" alt=""></div>
      <div class="remix-goods remix02">
        <self-define :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.slice(1,2)" :key="index"/>
      </div>
    </div>
    <div class="module" :style="{'background':'#FFBA00'}">
      <div class="wrapper">
        <div class="goods-container" :style="{'background':'#EAE8E8','width':5*2.25+'rem'}">
          <goods-item :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.slice(2,12)" :key="index"/>
        </div>
      </div>
    </div>
    <div class="relative">
      <div v-show="pageStyle=='liftStyle'"><img v-lazy="pageImgArr.pic05" alt=""></div>
      <div v-show="pageStyle=='workStyle'"><img v-lazy="pageImgArr.pic09" alt=""></div>
      <div class="remix-goods remix03">
        <self-define :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.slice(12,13)" :key="index"/>
      </div>
    </div>
    <div class="relative">
      <div v-show="pageStyle=='liftStyle'"><img v-lazy="pageImgArr.pic06" alt=""></div>
      <div v-show="pageStyle=='workStyle'"><img v-lazy="pageImgArr.pic10" alt=""></div>
      <div class="remix-goods remix04">
        <self-define :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.slice(13,14)" :key="index"/>
      </div>
    </div>
    <div class="module" :style="{'background':'#F8ADCC'}">
      <div class="wrapper">
        <div class="goods-container" :style="{'background':'#EAE8E8','width':5*2.25+'rem'}">
          <goods-item :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsIdArr.slice(14)" :key="index"/>
        </div>
      </div>
    </div>
    <div><img v-lazy="pageImgArr.pic11" alt=""></div>
    <div class="more" v-if="moreData.specialArrList.length">
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  import GoodsItem from 'components/GoodsItems/lineThree.vue'
  import SelfDefine from 'components/GoodsItems/selfDefine.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{GoodsItem,SelfDefine,SpecialItem},
    data(){
      return{
        isMaskLayer:false,//是否分享覆盖
        pageImgArr:{},
        scrollFixed:false,//是否固定tab
        pageStyle:'liftStyle',//默认tab1
        pageGoodsIds:{
          liftStyle:[
            1579459,1581995,1581993,1579903,1579867,1581991,1579871,1581965,1581967,1585361,1579887,1579461,
            1579891,1581983,1581969,1581977,1579873,1581979,1581971,1581973,1579875,1579889,1579877,1579463
          ],
          workStyle:[
            1579475,1579893,1581989,1579885,1579471,1579883,1579895,1579897,1579899,1579477,1581975,1579905,
            1581985,1581963,1584981,1579901,1579879,1579881,1581987,1579467,1579469,1585349,1579465,1583175
          ]
        },
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'69603,69593,69567,69569,69571,69573,69575,69577,69615,68829,69559,69563,69599,69589,69617,69591,69639,69627,69625,69619,69527,69543,69529,69623,69621,69645,69637',
          specialArrList:[]
        }
      }
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.initPageImg();
      this.getGoodsAction();
    },
    mounted(){
      let that=this;
      window.onscroll = function() {
        let tabLimitDis = that.$refs.abandon.offsetTop;
        let pageTop = window.scrollY;
        if (pageTop >= tabLimitDis) { that.scrollFixed=true;} 
        else {that.scrollFixed=false;}
      };
      this.moreSpecial();
    },
    methods:{
      initPageImg(){
        this.pageImgArr={
          pic01:require('../../../assets/img/youngMen/young01.jpg'),
          pic02:require('../../../assets/img/youngMen/young02.jpg'),
          pic03:require('../../../assets/img/youngMen/young03.jpg'),
          pic04:require('../../../assets/img/youngMen/young04.jpg'),
          pic05:require('../../../assets/img/youngMen/young05.jpg'),
          pic06:require('../../../assets/img/youngMen/young06.jpg'),
          pic07:require('../../../assets/img/youngMen/young07.jpg'),
          pic08:require('../../../assets/img/youngMen/young08.jpg'),
          pic09:require('../../../assets/img/youngMen/young09.jpg'),
          pic10:require('../../../assets/img/youngMen/young10.jpg'),
          pic11:require('../../../assets/img/youngMen/young11.jpg'),
          pic12:require('../../../assets/img/youngMen/young12.png')
        }
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(style){
        if(this.pageStyle==style){ return false}
        this.pageGoodsIdArr=[];
        this.pageStyle=arguments[0]?arguments[0]:'liftStyle';
        let param=this.pageGoodsIds[this.pageStyle].toString();
        getGoodsListApi(param).then(res =>{this.pageGoodsIdArr=res.data})
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>

<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 1.25rem;
    height: 0.65rem;
    position: absolute;
    top: 0.2rem;right: 0;
  }
  .remix-goods{
    width: 2.25rem;
    height: 2.23rem;
    position: absolute;
    overflow: hidden;
    top: 0.08rem;right: 1.3rem;
    &.remix01{top: 0.35rem;}
    &.remix03{top: 1rem;left: 1.3rem;}
    &.remix04{top: 0.09rem;left: 1.3rem;}
  }
}
.nav{
  width: 100%;
  height: 0.95rem;
  overflow: hidden;
  position: relative;
  div[class*='width']{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
    &.width_50_2{left: 50%;}
  }
  &.fixed{
    position: fixed;
    top: 0;left: 0;
    z-index: 50;
  }
}
.abandon{padding-top:0.95rem; }
.module{
  width: 100%;
  overflow: hidden;
  .wrapper{
    width: 7.27rem;
    margin: 0 0.12rem 0 0.13rem;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wrapper::-webkit-scrollbar {width:0px;height:0px;}
}
.goods-container{
  display: flex;
  flex-wrap: wrap;
  font-family: '微软雅黑';
  padding: 0.1rem 0.1rem 0rem;
  font-size: 0.3rem;
}
.more {
  .special {position: relative;}
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #666;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}
</style>